<%@page import="edu.hcmus.sow.utils.StringUtil"%>
<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="edu.hcmus.sow.service.DocumentService"%>
<%@page import="javax.swing.text.DateFormatter"%>
<%@page import="java.text.DateFormat"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@page import="java.util.Calendar"%>
<%@page import="org.ocpsoft.pretty.time.PrettyTime"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />
 
<link href="${pageContext.request.contextPath}/css/TaskPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/DialogPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/white.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/EditTaskPanelv2.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/datepicker/jquery-ui-1.8.21.custom-redmond.css" rel="stylesheet" type="text/css" />


<link rel="stylesheet" href="${pageContext.request.contextPath}/jqwidgets/styles/jqx.base.css" type="text/css" />
<link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-sliderAccess.js"></script>
<!-- Drop down check list -->
<link href="${pageContext.request.contextPath}/css/ui.dropdownchecklist.themeroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/ui.dropdownchecklist-1.4-min.js"></script>

<!-- token input -->
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/tokeninput/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/tokeninput/token-input.css" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/tokeninput/token-input-facebook.css" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/tokeninput/custom-token-input.css" type="text/css" />
<!-- end token input -->

<!-- Upload file -->
<link href="${pageContext.request.contextPath}/css/DocumentsPanel.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/upload/bootstrap-new.css" />
<link href="${pageContext.request.contextPath}/css/DocumentResultPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/jqwidgets/styles/jqx.darkblue.css" rel="stylesheet" type="text/css" />
<!-- Upload file -->

<style type="text/css"> 
	/* css for timepicker */
	.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
	.ui-timepicker-div dl { text-align: left; }
	.ui-timepicker-div dl dt { height: 20px; margin-bottom: -25px; }
	.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
	.ui-timepicker-div td { font-size: 40%; }
	.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
	/*css for line height: custom height of dorpdown check list*/
	.line {line-height: 15px;}
	.a_attach {
	   border: 1px solid #dddddd;
	   -moz-border-radius: 3px;
	   -webkit-border-radius: 3px;
	   border-radius: 3px;
	   background: white url(${pageContext.request.contextPath}/images/btn_icon_multiupload.png) no-repeat 2px 3px;
	   text-align: left;
	   text-indent: 40px;
	   font-weight: bold;
	   font-size: 12px;
	   display: block;
	   line-height: 40px;
	   width: 95%;
	   margin: 0px auto;
	   text-decoration: none;
	   margin-bottom: 7px;
	   color: #2592df;
	}
	.a_attach:hover {
	   background: #00ace1 url(${pageContext.request.contextPath}/images/btn_icon_multiupload.png) no-repeat 2px 3px;
	   color: white;
	   text-decoration: none;
	}
</style> 

<style type="text/css">
	/*css for comment table*/
	table#permisTable ul.token-input-list-facebook {
	   width: 370px;
	}
	table.permisTable div.token-input-dropdown-facebook {
	   width: 400px;
	   z-index: 9999;
	   /* z-index: 555; */
}
</style>

<script>
	function confirmDelete(delUrl) {
	  if (confirm("Are you sure you want to delete?")) {
	    document.location = delUrl;
	  }
	}
</script>

<script  type="text/javascript">
$(document).ready(function() {
   $('#fileupload').bind('fileuploaddone', function(){
      $('#attachments').load('${pageContext.request.contextPath}/ajax/task/${task.id}/attachment');
   });
});
</script>

<script>
   function openDialog() {
      $("#dialog").dialog({
      resizable: false,
      draggable: false,
      modal: true,
      width: 1200,
      height: 500
      });
   }
</script>
<script type="text/javascript">
	$(document).ready(function () {
		
		$('#loggedDate').datepicker({
			inline : true
		});
		$('#timeSpent').timepicker({});
		
		$('#dueDatePopup').datepicker({});
		$('#estHours').timepicker({});
		
		// Get user dropdown list
		/* */
		var curProgress = document.getElementById("adjustedEstimate").value;
		var taskID = document.getElementById("taskID").value;
		
		//function set value when slider is sliding...
		$('#slider').slider({
		    range: "min",
			min: 0,
		    max: 100,
		    value: curProgress,
			slide: function (event, ui) {
		        $("#percent").text(ui.value);
		    }
		});
		
		//set value to text
		$("#percent").text($("#slider").slider("value"));
		
		//update new value into database after 2s
		$( "#slider" ).slider({
			   stop: function(event, ui) {
			   var progressChanged = ui.value;
			   
			   setTimeout(function(){
				   $.ajax({
				   
		            url : '${pageContext.request.contextPath}/ajax/updateEstimate',
		            
		            type : "POST",
		            data: { taskID: taskID, progress : progressChanged },
		            dataType : "html",
		            
		            beforeSend : function() {
		            	/* alert(progressChanged); */
		            	$('#savingContainer').show();
		            },
		            complete : function() {
		            	$('#savingContainer').hide();
		            },
		            success : function(data) {
		            	if(progressChanged == 100){
		            		$('#markCompletedChange').fadeIn(500);
		            	}
		            	else
		            		$('#markCompletedChange').fadeOut(500);
		            		$('#markCompletedInfo').fadeOut(500);
		            },
		            error : function() {
		               alert("Err: Failure args: " + arguments);
		            }
		            
		        });}, 2000);
				   
			}
		});
		
		// table comment
		$("#permissionMember").tokenInput("${pageContext.request.contextPath}/ajax/user/search", {
            theme: "facebook",
            queryParam : "approver",
            //tokenLimit : 1,
            preventDuplicates: true,
            resultsFormatter: function(item) { return "<li>" + "<div><img src='${pageContext.request.contextPath}/images/default_profile.png' title='" + item.name + "' height='40px' width='40px' />" + "<div style='display: inline-block; vertical-align: top; padding: 0px 0px 0px 5px'><span style='display:block'>" + item.name + "</span><span>" + item.username + "</span></div></div></li>" },
            tokenFormatter: function(item) { return "<li><p>" + item.name + "</p></li>" }
        });
	});
	
	//------------------------------------------------------------End document.ready
	function ShowEditTaskPopup(){
    	$('#newTaskPopup').show(10);
	}
   	function HideEditTaskPopup(){
    	$('#newTaskPopup').fadeOut();
  	}
  	
   	//------------------------------------------------------------Add time spent
  	function addTimeSpent(){
		if (($('#loggedDate').val() == "") ||( $('#timeSpent').val() == "")|| ($('#timeSpentNote').val() == "")){
			$('#feedbacka').fadeIn(400);
		}
		else{
			var taskID = document.getElementById("taskID").value;
			var loggedDate = document.getElementById("loggedDate").value;
			var timeSpent = document.getElementById("timeSpent").value;
			var person =document.getElementById("person").value;
			var note = document.getElementById("timeSpentNote").value;
			//alert(loggedDate);
			$.ajax({
	            url : '${pageContext.request.contextPath}/ajax/addTimeSpent',
	            type : "POST",
	            data: { taskID: taskID, loggedDate: loggedDate, timeSpent : timeSpent,  person: person, note : note},
	            dataType : "html",
	            beforeSend : function() {
	            	$('#spinnerContainer').show();
	            	//$('#workLogLists').fadeOut();
	            },
	            complete : function() {
	            	$('#spinnerContainer').hide();
	            	//$('#workLogLists').fadeIn();
	            },
	            success : function(data) {
	            	//$('#feedbacka').fadeOut(500);
	            	$('#workLogLists').html(data);
	            	$('#spinnerContainer').hide(800);
	            	//alert(data);
	            	document.getElementById("timeSpentNote").value = "";
	            },
	            error : function() {
	               alert("Failure args: " + arguments);
	            }
      		});
		}
	}
  	function addTaskComment(){
  		var values = $("#s89").val();
  		//alert(myCars);
  		var userList = "";
  		if (values != null) {
	  		if (values.length > 0){
		  		for( i = 0; i < values.length; i++ ){
					if( i != values.length -1 ){
						userList += values[i];
						userList += ";";
					}
					else
						userList += values[i];
				} 
	  		}
  		}
  		var taskID = document.getElementById("taskID").value;
		var content = $('#taskCommentContent').val().trim();
		if (content == ""){
        	$('#feedbackAddComment').fadeIn(500);
        }
        else{
         	$.ajax({
	            url : '${pageContext.request.contextPath}/ajax/task/addComment',
	            type : "POST",
	            data: { taskID: taskID, content: content, userList: userList},
	            dataType : "html",
	            beforeSend : function() {
	            	$('#imgAddComment').show();
	            	//$('#taskCommentsList').fadeOut();
	            },
	            complete : function() {
	            	$('#imgAddComment').hide();
	            	//$('#taskCommentsList').fadeIn();
	            },
	            success : function(data) {
	            	$('#feedbackAddComment').fadeOut(500);
	            	$('#taskCommentsList').html(data);
	            	$('#taskCommentContent').val("");
	            	
	            	//Send email to users are checked
	            	$.ajax({
			            url : '${pageContext.request.contextPath}/ajax/task/sendMailToUsers',
			            type : "POST",
			            data: { taskID: taskID, content: content, userList: userList},
			            dataType : "html"
	            	});
	            },
	            error : function() {
	               alert("Failure args: " + arguments);
	            }
         });
         	$('#feedbackAddComment').fadeOut(500);
       } 
	}
  	
  	function editTask(){
  		if (checkInfo() == true){
	  		var taskID =  document.getElementById("taskID").value;
			var title = document.getElementById("editTitle").value;
			var description = $('#description').val().trim();
			
	        var assignedTo = document.getElementById("assignedTo").value;
	        	
	        var category = document.getElementById("category").value;
	        var project = document.getElementById("teamProject").value;
	        var dueDate = document.getElementById("dueDatePopup").value;
	        var estHours = document.getElementById("estHours").value;
	        var remindWhen = document.getElementById("remindWhen").value;
	        var isSendMail = $('input#emailReminder').is(':checked');
	        if (title == "" || title.length > 200){
	        	$('#errorPanelTitlePopup').fadeIn(500);
	        }
	        else{ 	
	        	$.ajax({
		            url : '${pageContext.request.contextPath}/ajax/task/'+ taskID +'/update',
		            type : "POST",
		            data: {
		            	title: title,
		            	description: description,
		            	assignedTo: assignedTo,
		            	category: category,
		            	project: project,
		            	dueDate: dueDate,
		            	estHours: estHours,
		            	remindWhen: remindWhen,
		            	isSendMail: isSendMail
		            	},
		            dataType : "html",
		            beforeSend : function() {
		            	$('#imgSpinnerContainerPopup').show();
		            },
		            complete : function() {
		            	$('#imgSpinnerContainerPopup').hide();
		            	//$('#tasksList').fadeIn();
		            },
		            success : function(data) {
		            	$('#errorPanelTitlePopup').fadeOut(500);
		            	$('#taskContent').html(data);
		            	HideEditTaskPopup();
		            	if (isSendMail == true){
		            		$.ajax({
		    		            url : '${pageContext.request.contextPath}/ajax/task/sendMail',
		    		            type : "POST",
		    		            data: {
		    		            	title: title,
		    		            	description: description,
		    		            	assignedTo: assignedTo,
		    		            	},
		    		            dataType : "html"
		            		});
		            	}
		            },
		            error : function() {
		               alert("Failure args: " + arguments);
		            }
	         });
	         	$('#errorPanelTitlePopup').fadeOut(500);
	        }
		}
  	}
  
  	function checkInfo(){
  		//Check dueDate and Estimated hours before submit
  		var dueDate = document.getElementById("currentDate").value;
  		/* var estimatedHour = document.getElementById("estimatedHours").value;
  		var h1 = estimatedHour.substring(0,2);
  		var mi1 = estimatedHour.substring(3,5); */
  		
  		var dueDateChoosen = document.getElementById("dueDatePopup").value;
  		/* var estHoursChoosen = document.getElementById("estHours").value;
  		var h2 = estHoursChoosen.substring(0,2);
  		var mi2 = estHoursChoosen.substring(3,5); */

  		if (dueDateChoosen != ""){
  			if (Date.parse(dueDate) > Date.parse(dueDateChoosen)) {
  				alert("Invalid Date Range!\n'Due Date' cannot be before current date!");
  				return false;
  			}
  		}
  		/* if(estHoursChoosen != "" && (Date.parse(dueDate) > Date.parse(dueDateChoosen))){
			if (h1 > h2){
				alert("You cann't choose smaller hour due date");
				return false;
			}
			else{
				if (mi1 > mi2){
					alert("You cann't choose smaller minute due date");
					return false;
				}
			}
		} */
  		return true;
  	}
  	function check(){
  		
  		//Check dueDate and Estimated hours before submit
  		var dueDate = document.getElementById("dueDate").value;
  		var estimatedHour = document.getElementById("estimatedHours").value;
  		var y1 = dueDate.substring(6,10);
  		var m1 = dueDate.substring(0,2);
  		var d1 = dueDate.substring(3,5);
  		var h1 = estimatedHour.substring(0,2);
  		var mi1 = estimatedHour.substring(3,5);
  		
  		var dueDateChoosen = document.getElementById("dueDatePopup").value;
  		var estHoursChoosen = document.getElementById("estHours").value;
  		var y2 = dueDateChoosen.substring(6,10);
  		var m2 = dueDateChoosen.substring(0,2);
  		var d2 = dueDateChoosen.substring(3,5);
  		var h2 = estHoursChoosen.substring(0,2);
  		var mi2 = estHoursChoosen.substring(3,5);

  		
  		if (dueDateChoosen != ""){
  			if (Date.parse(dueDate) > Date.parse(dueDateChoosen)) {
  				alert("Invalid Date Range!\nStart Date cannot be after Due Date!");
  				return false;
  			}
  		}
  		if(estHoursChoosen != "" && (Date.parse(dueDate) > Date.parse(dueDateChoosen))){
			if (h1 > h2){
				alert("You cann't choose smaller hour due date");
				return false;
			}
			else{
				if (mi1 > mi2){
					alert("You cann't choose smaller minute due date");
					return false;
				}
			}
		}
  		
  		//When update task you have to notify to person who is assigned
  		var emailCheck = $('input#emailReminder').is(':checked'); 
  		if(emailCheck == false) { 
  			alert('You have not checked on checkbox Email\nPlease try again...'); 
  			return false;
  		}
  		var e=document.getElementById('addNewTaskForm'); 
  		e.name='submitLink';
  		e.value='uploadNewVersion';
  		var f=document.getElementById('addNewTaskForm');
  		var ff=f;
  		if (ff.onsubmit != undefined) {
  			if (ff.onsubmit()==false) 
  				return false; 
  			}
  		f.submit();
  		e.value='';
  		e.name='';
  		return false;
  	}
  	
  	
</script>

<!-- Comment -->
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
   Wicket.Event.add(window,"domready",function(event) {
      $('#taskCommentContent').tinymce({
            script_url : '${pageContext.request.contextPath}/scripts/tiny_mce/tiny_mce.js',
            theme : "advanced",
            auto_resize : "true",
            relative_urls : false,
            verify_html : false,
            width : "90%",
            plugins : "safari,style,layer,emotions,iespell,paste,xhtmlxtras",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,paste,pastetext,pasteword,|,bullist,numlist,|,emotions",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_buttons4 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_resizing : false
      });
      
      $('#description').tinymce({
          script_url : '${pageContext.request.contextPath}/scripts/tiny_mce/tiny_mce.js',
          theme : "advanced",
          auto_resize : "true",
          relative_urls : false,
          verify_html : false,
          width : "102%",
          height: '150',
          plugins : "safari,style,layer,emotions,iespell,paste,xhtmlxtras",
          theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,paste,pastetext,pasteword,|,bullist,numlist,|,emotions",
          theme_advanced_buttons2 : "",
          theme_advanced_buttons3 : "",
          theme_advanced_buttons4 : "",
          theme_advanced_toolbar_location : "top",
          theme_advanced_toolbar_align : "left",
          theme_advanced_resizing : false
    });
   });
</script>
<!-- End comment -->
<input type="hidden" name= "currentDate" id ="currentDate" value="<%= StringUtil.convertCalendarToDate(Calendar.getInstance())%>">
<div class="cubeTitleWrapper">
      <span class="cube_title">SharedWorkspaces</span> <span class="wklinks"> <span class="settings"><a
            href="">Settings</a></span>
      </span>
</div>
<div id="conten_login" style="padding-bottom: 100px;">
    <div id="con_left" style="width:75%;">
    	<div id="taskContent" class="box_con_con" style="width: 99%;">
        	<%@include file="controls/c_taskContents.jsp" %>                  
   		</div>                
	</div>
<div id="con_right" style="width:25%;">
<div class="box_con" style="float:right; width: 96%; margin-right: 10px;">
   	<div style="line-height: 24px;" class="div_h3">
           <h3 style="letter-spacing: 0px; font-size: 13px;">Tools</h3>
       </div>
       <div class="box_task" style="margin-top:10px; margin-bottom:2px;">
       	<a href="${pageContext.request.contextPath}/task/${task.id }/markCompleted?project=${task.project.id}" style="border:1px solid #CCCCCC;" class="a_task">Mark this task is completed<img id="imgCompletedTask"  style="display:none;" src="${pageContext.request.contextPath}/images/throbber.gif"></a>
       	<a href="#" style="border:1px solid #CCCCCC;" class="a_attach" onclick="openDialog();">Add Attachment</a>
       	<a href="#" onclick="ShowEditTaskPopup();" style="border:1px solid #CCCCCC;" class="a_edit">Edit</a>
        <a href="javascript:confirmDelete('${pageContext.request.contextPath}/task/${task.id}/delete?projectID=${task.project.id}')" class="a_delete" style="border:1px solid #CCCCCC;">Delete</a>
        </div>
    </div>
</div>
<div style="display: none;" id="newTaskPopup" >
	<div  id="dialogContainer">
		<div  id="gcdialog" style="z-index: 10">
			<div class="gcdtitle">
				<span class="title">Edit task</span> <a onclick="HideEditTaskPopup();" id="close"></a>
			</div>
			<div class="contentwrapper">
				<div  class="content">
					<span  id="dialogContent"> 
						<form id="addNewTaskForm" method="post" action="${pageContext.request.contextPath}/task/${task.id}/update" name="addNewTaskForm">
							<div id="fields">
							<span id="errorPanelTitlePopup" style="display: none; width: 98%; padding-left: 1%;">
									<ul class="feedbackPanel">
										<li class="feedbackPanelERROR">
											<span class="feedbackPanelERROR">Field 'Title' is a required field or the length of it so long.</span>
										</li>
									</ul>
								</span>
								<div >
									<b>Title</b> 
									<input id="editTitle" style="margin-bottom: 15px; width: 100%; height: 25px; font-size: 13px;"
										class="Text semiFull dialogTaskInput" name="title"
										type="text" value="${task.title }">
								</div>
								<div style="width: 100%;">	
									<b style="display: block;">Description</b>
									<textarea  name="description" id="description" >${task.description }</textarea>
								</div>
								<div class="assignTask" style="width: 100%;">
									<div class="taskDrop">
										<span style="position: relative;"><b>Assign
												this task to</b></span><br>
										<select  name="assignedTo" id="assignedTo">
											<c:forEach items="${userlists }" var="user">																	
												<option value="${user.id }">${user.username }</option>
											</c:forEach>
										</select>
									</div>
									<div class="CatDrop">
										<span style="position: relative;"><b>Category</b></span>
										<a style="margin: 10px 0px 0px 10px;" href="${pageContext.request.contextPath}/taskCategories">Edit categories</a>
										<select name="category" id="category">
											<option selected="selected" value="0">---Choose One---</option>
											<c:forEach items="${categories}" var="category">
												<option value="${category.id }">${category.name}</option>
											</c:forEach>
										</select>
									</div>
									<div class="CatDrop">
										<span style="position: relative;"><b>Project</b></span><br>
										<select name="teamProject" id="teamProject" style="width: 100%;">
											<option selected="selected" value="0">---Choose One---</option>
											<c:forEach items="${projects}" var="project">
											<option value="${project.id}">${project.name }</option>
											</c:forEach>
										</select>
									</div>
									<br class="clear"/>
								</div>
								<div class="dueDate">
									<div class="dDate" style="width: 130px; ">
										<b>Due date</b>
										<input style="display: block; width: 100px; text-align: center; font-weight: bold;" class="Text" name="dueDatePopup" id="dueDatePopup" type="text">
									</div>
									<div class="estimatedHours" style="width: 110px; margin-right: 0px; ">
										<b>Estimated Hours</b> 
										<input class="Text" id="estHours" name="estHours" type="text" style="width: 82px; text-align: center; font-weight: bold;">
									</div>
									<div class="reminder" style="width: 130px;  margin-left: 0px;" >
										<b>Remind assignee</b><br>
										<select style="margin-top: 4px;" class="remindWhen" name="remindWhen" id="remindWhen">
											<option selected="selected" value="0">None</option>
											<option value="1">The same day</option>
											<option value="2">The day before</option>
											<option value="7">The week before</option>
										</select>
									</div>
									<div class="options">
										<b>By</b>
										<br>
										<span class="options">
										<input	name="emailReminder" id = "emailReminder" type="checkbox" value="true" checked="checked"> Email
											&nbsp; 
										</span>
									</div>
									<br class="clear">
								</div>
							</div>												
							<div class="actionBtns">
								<a class="gcSubmit f_left" href="#" onclick="editTask();">
									<span>Update</span> 
									<span class="left"></span> 
									<span class="right"></span>
									<span>&nbsp;<img id="imgSpinnerContainerPopup" style="display: none;" src="${pageContext.request.contextPath}/images/loading.gif"></span>
								</a> or <a id="cancel" href="#"	onclick="HideEditTaskPopup();">cancel</a>
							</div>
							<div class="spacer">&nbsp;</div>
							<div id="upgradeDialog"></div>
						</form>
						<!-- var check = $('input#emailReminder').is(':checked'); if(check == false) { alert('You have not checked on checkbox Email\nPlease try again...'); return false;} var e=document.getElementById('addNewTaskForm'); e.name='submitLink'; e.value='uploadNewVersion';var f=document.getElementById('addNewTaskForm');var ff=f;if (ff.onsubmit != undefined) { if (ff.onsubmit()==false) return false; }f.submit();e.value='';e.name='';return false; -->
					</span>
				</div>
			</div>
			<div class="background userDefinedBg"></div>
		</div>
	</div>
</div>


<!-- UPLOAD FILES -->
 <div style="display: none;" class="" id="singleFileUploadDialog">
 
       <div id="dialog" title="Upload new document">
       <div style="padding-bottom: 10px;"></div>
          <div class="container">
           <!-- The file upload form used as target for the file upload widget -->
           <form id="fileupload" action="${pageContext.request.contextPath}/task/${taskID}/attachment/upload" method="POST" enctype="multipart/form-data">
               <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
               <div class="row fileupload-buttonbar">
                   <div class="span7">
                       <!-- The fileinput-button span is used to style the file input field as button -->
                       <span class="btn btn-success fileinput-button">
                           <i class="icon-plus icon-white"></i>
                           <span>Add files...</span>
                           <input name="files[]" multiple="" type="file">
                       </span>
                       <button type="submit" class="btn btn-primary start">
                           <i class="icon-upload icon-white"></i>
                           <span>Start upload</span>
                       </button>
                       <button type="reset" class="btn btn-warning cancel">
                           <i class="icon-ban-circle icon-white"></i>
                           <span>Cancel upload</span>
                       </button>
                       <input type="hidden" name="p" value="${currentFolderID}"/>
                   </div>
                   <!-- The global progress information -->
                   <div class="span5 fileupload-progress fade">
                       <!-- The global progress bar -->
                       <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                           <div class="bar" style="width:0%;"></div>
                       </div>
                       <!-- The extended global progress information -->
                       <div class="progress-extended">&nbsp;</div>
                   </div>
               </div>
               <!-- The loading indicator is shown during file processing -->
               <div class="fileupload-loading"></div>
               <br>
               <!-- The table listing the files available for upload/download -->
               <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
           </form>
          </div>
       </div>
   
 </div>
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/dialog/jquery.ui.all.css" />
 <!--<script src="${pageContext.request.contextPath}/scripts/dialog/jquery-1.7.2.js"></script>-->
 <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.bgiframe-2.1.2.js"></script>
 <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.core.js"></script>
 <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.widget.js"></script>
 <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.mouse.js"></script>
 <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.button.js"></script>
 <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.draggable.js"></script>
 <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.position.js"></script>
 <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.resizable.js"></script>
 <script src="${pageContext.request.contextPath}/scripts/dialog/jquery.ui.dialog.js"></script>
 
 
 <!-- <link rel="stylesheet" href="${pageContext.request.contextPath}/css/upload/style.css"> -->
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/upload/bootstrap-responsive.css" />
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/upload/bootstrap-image-gallery.css" />
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/upload/jquery.css" />
 
 <script id="template-upload" type="text/x-tmpl">
                  {% for (var i=0, file; file=o.files[i]; i++) { %}
                  <tr class="template-upload fade">
                  <td class="preview"><span class="fade"></span></td>
                  <td class="name"><span>{%=file.name%}</span></td>
                  <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
                  {% if (file.error) { %}
                     <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
                  {% } else if (o.files.valid && !i) { %}
                     <td>
                     <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
                     </td>
                     <td class="start">{% if (!o.options.autoUpload) { %}
                     <button class="btn btn-primary">
                  <i class="icon-upload icon-white"></i>
                     <span>{%=locale.fileupload.start%}</span>
                     </button>
                     {% } %}</td>
                  {% } else { %}
                     <td colspan="2"></td>
                  {% } %}
                  <td class="cancel">{% if (!i) { %}
                     <button class="btn btn-warning">
                     <i class="icon-ban-circle icon-white"></i>
                     <span>{%=locale.fileupload.cancel%}</span>
                     </button>
                  {% } %}</td>
                  </tr>
                  {% } %}
               	  </script>
 <!-- The template to display files available for download -->
 <script id="template-download" type="text/x-tmpl">
                  </script>
 <!-- <script src="${pageContext.request.contextPath}/scripts/upload/jquery-1.7.2.min.js"></script> -->
 <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
 <script src="${pageContext.request.contextPath}/scripts/upload/jquery.ui.widget.js"></script>
 <!-- The Templates plugin is included to render the upload/download listings -->
 <script src="${pageContext.request.contextPath}/scripts/upload/tmpl.js"></script>
 <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
 <script src="${pageContext.request.contextPath}/scripts/upload/load-image.js"></script>
 <!-- The Canvas to Blob plugin is included for image resizing functionality -->
 <script src="${pageContext.request.contextPath}/scripts/upload/canvas-to-blob.js"></script>
 <!-- Bootstrap JS and Bootstrap Image Gallery are not required, but included for the demo -->
 <script src="${pageContext.request.contextPath}/scripts/upload/bootstrap.js"></script>
 <script src="${pageContext.request.contextPath}/scripts/upload/bootstrap-image-gallery.js"></script>
 <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
 <script src="${pageContext.request.contextPath}/scripts/upload/jquery.iframe-transport.js"></script>
 <!-- The basic File Upload plugin -->
 <script src="${pageContext.request.contextPath}/scripts/upload/jquery.fileupload.js"></script>
 <!-- The File Upload file processing plugin -->
 <script src="${pageContext.request.contextPath}/scripts/upload/jquery.fileupload-fp.js"></script>
 <!-- The File Upload user interface plugin -->
 <script src="${pageContext.request.contextPath}/scripts/upload/jquery.fileupload-ui.js"></script>
 <!-- The localization script -->
 <script src="${pageContext.request.contextPath}/scripts/upload/locale.js"></script>
 <!-- The main application script -->
 <script src="${pageContext.request.contextPath}/scripts/upload/main.js"></script>
 <!-- END UPLOAD FILES -->
